<script>
export default {
  name: 'Cover',
  mounted() {
    const cover = document.createElement('div');
    cover.style.position = 'fixed';
    cover.style.top = '0';
    cover.style.left = '0';
    cover.style.width = '100%';
    cover.style.height = '100%';
    cover.style.background = 'rgba(0, 0, 0, .4)';
    cover.style.zIndex = '20';
    cover.id = 'cover';
    if (process.client) {
      document.querySelector('body').appendChild(cover);
    }
  },
  destroyed() {
    if (process.client) {
      const child = document.querySelector('#cover');
      child.parentNode.removeChild(child);
    }
  },
  render() {
    return '';
  }
};
</script>
